<template>
    <Row>
        <Col span="6" style="overflow:auto;padding:1em;">
            <Tree :data="data" :render="renderContent"></Tree>
        </Col>
        <Col span="18" style="border-left:1px solid #eee;overflow:auto;padding:1em;">
            <Tabs value="name1">
                <TabPane label="描述" name="name1">
                    <Description :model="current_model"></Description>
                </TabPane>
                <TabPane label="模拟" name="name2">
                    <Simulation :model="current_model"></Simulation>
                </TabPane>
            </Tabs>
        </Col>
    </Row>
</template>
<script>
import Description from "./Description";
import Simulation from "./Simulation";

export default {
    components: {
        Description, Simulation
    },
    data() {
        return {
            data: [],
            current_model: {}
        };
    },
    computed: {
    },
    methods: {
        renderContent (h, { root, node, data }) {
            return h('span', {
                attrs: {
                    title: data.description.length > 50 ? data.description.substring(0, 50) + "..." : data.description
                },
                style: { 
                    display: 'inline-block',
                    width: '95%', 
                    cursor: "pointer", 
                    backgroundColor: this.current_model.full_name == data.full_name ? "#f8f8dd" : "" 
                }, on: {
                    click: () => { 
                        this.current_model = data; 
                    }
                }
            }, [
                h('span', { 
                    style: { marginRight: '8px' } 
                }, data.title),
                h('span', { 
                    style: { 
                        color: '#888'
                    } 
                }, data.description.length > 15 ? data.description.substring(0, 15) + "..." : data.description),
            ]);
        },
        handleData(data, parent) { // 将接口数据解析成能够被树形控件解析的结构
            parent = parent || { full_name: "" };
            data.title = data.name;
            data.expand = true;
            data.full_name = parent.full_name + "/" + data.name;
            if(data.children) {
                var temp = [];
                for(var key in data.children) {
                    temp.push(this.handleData(data.children[key], data));
                }
            }
            data.children = temp;
            return data;
        }
    },
    created() {
        this.ajax.post("common/document").then( res => {
            this.data = [this.handleData(res.data.data)];
        });
    }
};
</script>

<style scoped>
</style>
